<template>
    <div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            :immediate-check="false" :offset="10">
            <van-cell v-for="item in datalist" :key="item.filmId" @click="handleClick(item.filmId)">
                <img :src="item.poster" style="width: 120px; float: left;">
                <div> {{ item.name }}</div>
            </van-cell>
        </van-list>
    </div>
</template>
<!-- <script>
import axios from 'axios'
import { onMounted, ref } from 'vue';
export default {
    data() {
        return {
            datalist: []
        }
    },
    async mounted() {
        const res = await axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=7463219",
            headers: {
                "X-Client-Info": '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16927511235634589070458881", "bc": "110100" }',
                "X-Host": 'mall.film-ticket.film.list'
            }
        })
        console.log(res.data);
        this.datalist = res.data.data.films
    },
    methods: {
        handleClick(id) {
            // 编程式导航
            //第一类
            //第一种写法：路径+路由参数
            this.$router.push(`/detail/${id}`)

            //第二种写法：路径+路由参数 对象写法
            // this.$router.push({
            //     name: "Detail",
            //     params: {
            //         myid: id
            //     }
            // })

            //第二类
            //路径+query    query传参
            // this.$router.push({
            //     path: '/detail',
            //     query: {
            //         myid: id
            //     }
            // })
        }
    }
}
</script> -->

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { List as vanList, Cell as vanCell } from 'vant';

const datalist = ref([])
const router = useRouter()

const loading = ref(false) //加载状态
const finished = ref(false) //结束状态
const pageNum = ref(1) //第几页
const total = ref(0) //所有数据大小


onMounted(async () => {
    const res = await axios({
        url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=7463219",
        headers: {
            "X-Client-Info": '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16927511235634589070458881", "bc": "110100" }',
            "X-Host": 'mall.film-ticket.film.list'
        }
    })
    // console.log(res.data);
    total.value = res.data.data.total
    datalist.value = res.data.data.films
})

const handleClick = (id) => {
    router.push(`/detail/${id}`)
}

const onLoad = async () => {
    console.log("到底了！");

    pageNum.value++
    const res = await axios({
        url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${pageNum.value}&pageSize=10&type=1&k=7463219`,
        headers: {
            "X-Client-Info": '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16927511235634589070458881", "bc": "110100" }',
            "X-Host": 'mall.film-ticket.film.list'
        }
    })
    //原来基础 追加10条
    datalist.value = [...datalist.value, ...res.data.data.films]

    //允许再加载
    loading.value = false

    if (datalist.value.length === total.value) {//所有数据取完了
        finished.value = true //finished-text="没有更多了"文案没显示，是因为tabbar组件的优先级高，背景色覆盖住了
    }
}

</script>

<style lang="scss" scoped>
ul {
    li {
        padding: 10px;
    }
}

//解决scoped导致的内部子节点样式不生效问题
:deep(.van-cell__value) {
    text-align: left;
}
</style>